import React, { useState,useEffect } from 'react';
import Table from '../../../components/packagingPopup/LmdTable';
import '../../../scss/lmd/WarehousingManagement.scss'
import { Button, Form, Input, Select,Modal,DatePicker, Space,message } from 'antd';
import { SearchOutlined, PlusCircleOutlined, StopOutlined } from '@ant-design/icons';
import { DeliveryManagement_table,DeliveryManagement_search,DeliveryManagement_add } from '../../../tools/api';


function DeliveryManagement(props) {
    var [SelectChange,setSelectChange]=useState([])
    var [dateString,setdateString]=useState([])
    var [dataSource,setdataSource]=useState([]);
    var [loading,setloading]=useState(false);
    const [messageApi, contextHolder] = message.useMessage();
    const { Option } = Select;

    const success = (text) => {
        messageApi.open({
          type: 'success',
          content: text,
        });
      };
    //表单数据过滤查询
    const onFinish = (value) => {
        console.log(value);
        if(dateString){
            value.dateString=dateString;
        }
        if(value!==[]){
            DeliveryManagement_search({delivery_like:value.delivery,warehouse_like:value.warehouse,dateString_like:value.dateString,number_like:value.number}).then((res)=>{
                setdataSource(res.data)
            })
            setloading(true);
            setTimeout(() => {
                setloading(false)
            }, 500);
        }
    };
    // 日期
    const onChange = (date, dateString) => {
        setdateString(dateString)
    };
    // 表格数据
    useEffect(()=>{
        datasource();
    },[])
    var datasource=()=>{
        DeliveryManagement_table().then((res)=>{
            setdataSource(res.data)
        })
    }

    // 单选框
    const getonSelectChange = (SelectChange) => {
        setSelectChange(SelectChange)
    };

    // 新增（对话框）
    const [isModalOpen, setIsModalOpen] = useState(false);

    const showModal = () => {
        setIsModalOpen(true);
    };
    
    const onFinish1 = (value) => {
        value.dateString=dateString;
        value.key=String(dataSource.length+1) ;
        value.id=String(dataSource.length+1) ;
        DeliveryManagement_add(value).then((res)=>{
            setIsModalOpen(false);
            datasource();
            success("新增成功")
            setloading(true);
            setTimeout(() => {
                setloading(false)
            }, 500);
        })
    };
    const handleCancel = () => {
        setIsModalOpen(false);
      };

    return (
        <div id='warehousingmanagement'>
            {contextHolder}
            <div className='warehousingmanagementsearch'>
                <Form className='form' initialValues={{ remember: true }} onFinish={onFinish}>
                    <Form.Item className='item' label="入库状态" name="delivery" >
                        <Select
                            placeholder="全部"
                            style={{ width: 120 }}
                        >
                            <Option value="">全部</Option>
                            <Option value="自配送">自配送</Option>
                            <Option value="第三方物流">第三方物流</Option>
                            <Option value="门店自提">门店自提</Option>
                        </Select>
                    </Form.Item>
                    <Form.Item className='item' label="出库日期">
                        <Space direction="vertical">
                            <DatePicker onChange={onChange} placeholder='请输入创建时间' />
                        </Space>
                    </Form.Item>
                    <Form.Item className='item' label="出货仓库" name="warehouse" onChange={onChange}>
                        <Input placeholder='请输入供应商姓名' />
                    </Form.Item>
                    <Form.Item className='item' label="订单编号" name="number">
                        <Input placeholder='请输入采购发起人姓名' />
                    </Form.Item>
                <Button className='btn' type="primary" htmlType="submit" icon={<SearchOutlined />} onClick={onFinish}>搜索</Button>
                <Button className='btn' type="primary"  icon={<PlusCircleOutlined />} onClick={showModal} style={{background:'#0077ff'}}>添加</Button>
                </Form>
            </div>
            <Table dataSource={dataSource} status={2} getOnSelectChange={getonSelectChange} datasource={datasource} loading={loading}/>
             {/* 新增 */}
             <Modal title="新增出库数据" open={isModalOpen}   footer={[]}>
            <Form
                name="basic"
                className='basic'
                labelCol={{ span: 6 }}
                wrapperCol={{ span: 18 }}
                initialValues={{ remember: true }}
                onFinish={onFinish1}
                >
                    <div className='zhan' style={{height:20}}></div>

                <Form.Item
                    name="dateString"
                    label='出库日期'
                >
                    <Space direction="vertical">
                        <DatePicker onChange={onChange} placeholder='请输入创建时间' />
                    </Space>
                </Form.Item>
                <Form.Item
                    name="number"
                    label='订单编号'
                    rules={[{ required: true, message: '订单编号不能为空' }]}
                >
                    <Input placeholder='请输入订单编号' />
                </Form.Item>
                <Form.Item
                    name="delivery"
                    label='配送方式'
                    rules={[{ required: true, message: '配送方式不能为空' }]}
                >
                    <Select
                            placeholder="全部"
                            style={{ width: 120 }}
                        >
                            <Option value="自配送">自配送</Option>
                            <Option value="第三方物流">第三方物流</Option>
                            <Option value="门店自提">门店自提</Option>
                        </Select>
                </Form.Item>
                <Form.Item
                    name="receipt"
                    label='收货人'
                    rules={[{ required: true, message: '收货人不能为空' }]}
                >
                    <Input placeholder='请输入收货人' />
                </Form.Item>
                <Form.Item
                    name="phone"
                    label='收货人联系方式'
                    rules={[{ required: true, message: '收货人联系方式不能为空' }]}
                >
                    <Input placeholder='请输入收货人联系方式' />
                </Form.Item>
                <Form.Item
                    name="region"
                    label='配送区域'
                    rules={[{ required: true, message: '配送区域不能为空' }]}
                >
                    <Input placeholder='请输入配送区域' />
                </Form.Item>

                <Form.Item wrapperCol={{ offset: 7, span: 16 }}>
                    <Button type="primary" htmlType="submit" onClick={onFinish1} style={{marginRight:20+'px'}}>
                        确认新增
                    </Button>
                    <Button onClick={handleCancel} style={{marginLeft:20+'px'}}>
                        取消
                    </Button>
                </Form.Item>
            </Form>
            </Modal>
        </div>
    );
}

export default DeliveryManagement;